<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	html,body{
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-align: center;
	}
	#gameCanvas{
		border: 2px solid #ff3d17;
		margin: 10px;
		position: relative;
	}
	</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script type="text/javascript">
Array.prototype.forRound = function(fn,axis,self){
	var that = this, i = axis[0], j=axis[1];
	f(i-1,j-1);f(i-1,j);f(i-1,j+1);f(i,j-1);
	if(self){f(i,j)}f(i,j+1);f(i+1,j-1);f(i+1,j);f(i+1,j+1);
	function f(i,j){
		// 确保不访问非法内存
		if(i < 0 || i >= that.length || j < 0 || j >= that[0].length){
			return 0
		}
		fn(that[i][j],[i,j],that)
	}
}</script>
<script type="text/javascript">
!function(w,e){
	function Game(option){
		Object.assign(this,{
			el: "#gameCanvas",
			mainWidth: 0,
			mainHeight: 0,
			timer: null,
			side: 2,
			innerSide: 2,
			innerOffset: 0,
			map: [],
			nX: 400,
			nY: 400,
		},option)
		this.init()
	}
	Game.prototype.expend = function(obj){Object.assign(this,obj)}
	Game.prototype.expend({
		// 初始化
		init(){
			this.canvas = e.querySelector(this.el)
			this.canvas.isUsed = true
			this.mainWidth = this.side*this.nX
			this.mainHeight = this.side*this.nY
			this.canvas.setAttribute("width",this.mainWidth)
			this.canvas.setAttribute("height",this.mainHeight)
			this.cx = this.canvas.getContext("2d")
			this.innerOffset = (this.side - this.innerSide) / 2
			this.addEvents()
			this.start()
		},
		// 绑定事件
		addEvents(){
			this.windowKeydown = evt => {
				var k = evt.key
				if(k === "a" || k === "A" || k === "ArrowLeft"){
					this.turn(-1,0)
				}else if(k === "d" || k === "D" || k === "ArrowRight"){
					this.turn(1,0)
				}else if(k === "w" || k === "W" || k === "ArrowUp"){
					this.turn(0,-1)
				}else if(k === "s" || k === "S" || k === "ArrowDown"){
					this.turn(0,1)
				}
			}
			w.addEventListener("keydown",this.windowKeydown)
		},
		// 开始游戏
		start(){
			// // 创建随机迷宫
			// for(let i = 0; i < this.nY; i++){
			// 	this.map[i] = []
			// 	for(let j = 0; j < this.nX; j++){
			// 		// this.map[i][j] = Math.random()
			// 		// this.map[i][j] = Math.round(Math.random() * .5008)
			// 		this.map[i][j] = 0
			// 	}
			// }
			// this.map[200][200] = 1
			// var automatic = (arr,n) => {
			// 	var arr1 = []
			// 	for(let i = 0; i < this.nY; i++){
			// 		arr1[i] = []
			// 	}
			// 	for(let i = 0; i < this.nY; i++){
			// 		for(let j = 0; j < this.nX; j++){
			// 			var sum = 0
			// 			arr.forRound(p => {
			// 				sum += p
			// 			},[i,j])
			// 			// arr1[i][j] = sum > n ? 1 : 0
			// 			if(sum % 2 == 1){
			// 				arr1[i][j] = 1
			// 			}else{
			// 				arr1[i][j] = 0
			// 			}
			// 		}
			// 	}
			// 	return arr1
			// }
			// 创建随机迷宫
			for(let i = 0; i < this.nY; i++){
				this.map[i] = []
				for(let j = 0; j < this.nX; j++){
					// this.map[i][j] = Math.random()
					this.map[i][j] = Math.round(Math.random()*.68)
					// this.map[i][j] = 0
				}
			}
			var automatic = (arr,n) => {
				var arr1 = []
				for(let i = 0; i < this.nY; i++){
					arr1[i] = []
				}
				for(let i = 0; i < this.nY; i++){
					for(let j = 0; j < this.nX; j++){
						var sum = 0
						arr.forRound(p => {
							sum += p
						},[i,j],true)
						arr1[i][j] = sum >= 4 ? 1 : 0
					}
				}
				return arr1
			}
			// this.map = automatic(this.map,4)
			// 绘制
			this.cx.fillStyle = '#2b7d42'
			this.draw(() => {
				this.map = automatic(this.map,4)
				for(let i = 0; i < this.nY; i++){
					for(let j = 0; j < this.nX; j++){
						if(this.map[i][j] > .5){
							this.cx.fillRect(
								j * this.side + this.innerOffset,
								i * this.side + this.innerOffset,
								this.innerSide,
								this.innerSide
							)
						}
					}
				}
			},true)
		},
		// 销毁实例
		destroy(){
			this.timer && clearInterval(this.timer)
			this.cx.clearRect(0,0,this.mainWidth,this.mainHeight)
			this.canvas.isUsed = false
			w.removeEventListener("keydown",this.windowKeydown)
		},
		// 主绘制函数
		draw(frame,isSingle){
			this.timer && clearInterval(this.timer)
			var main = () => {
				this.cx.save()
				this.cx.clearRect(0,0,this.mainWidth,this.mainHeight)
				frame()
				this.cx.restore()
			}
			if(isSingle){
				main()
			}else{
				this.timer = setInterval(main,33)
			}
		}
	})
	w.Game = Game
}(window,document)
var gameDemo = new Game({
	
	})
	
</script>
</body>
</html>